<template>
<div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
       <div class="header">
           <div>
           <span>关键字</span>
         <el-input v-model="keyword.input" placeholder="根据编号搜索" class="inp"></el-input>
         </div>
         <div>
            <el-button @click="clear">清除</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
         </div>
       </div>

      </el-card>
       <div class="bodyer">
         <i class="el-icon-info"></i>
         <span class="size1">数据一共{{nums}}条</span>
       </div>
    </div>
    <el-card>
      <el-table
      :data="tableData"
      style="width:100%"
      >
      <el-table-column
        prop="id"
        label="编号"

        width="180">
      </el-table-column>
      <el-table-column

        label="题型"
        width="80">
        <template slot-scope="scope">
           <div>{{scope.row.questionType | changeQuestionType}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="questionID"

        label="题目编码" >
           <template slot-scope="{row}">
              <div v-for='(item,index) in row.questionIDs' :key= 'index'>
                 <el-button type="text" @click.prevent="getdata(item.id)">{{item.number}}</el-button>
              </div>

           </template>
      </el-table-column>
      <el-table-column
        prop="addTime"

        label="录入时间">
      </el-table-column>
      <el-table-column
        prop="totalSeconds"

        label="答题时间(s)">
      </el-table-column>
      <el-table-column
        prop="accuracyRate"
        width='100'
        label="正确率(%)">
      </el-table-column>
      <el-table-column
        prop="userName"
        width="80"
        label="录入人">
      </el-table-column>
      <el-table-column
        prop="people"
        width="80"
        label="操作">
       <template slot-scope="scope">
         <button class="btn" @click="deldata(scope.row)">
          <span >
            <i class="el-icon-delete"></i>
          </span>
        </button>
       </template>
      </el-table-column>
    </el-table>
      <el-pagination
      background
      align="right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pagesizes"
      :page-size="pagesize"
      layout=" sizes, prev, pager, next, jumper"
      :total="total"
      >
    </el-pagination>
    <el-dialog
  title="题目预览"
  :visible.sync="dialogVisible"
  width="60%"
  @close='closeDialog'
 >
 <el-form :inline="true" :model="dialog"  class="demo-form-inline" label-position='left' label-width='150px' >
  <el-form-item label="[题型]:" >
    <span>{{dialog.questionType|changeQuestionType}}</span>
  </el-form-item>
  <el-form-item label="[编号]:">
    <span>{{dialog.enterpriseID}}</span>
  </el-form-item>
  <el-form-item label="[难度]:">
    <span>{{dialog.difficulty|changeDifficulty}}</span>
  </el-form-item>
  <el-form-item label="[标签]:">
    <span>{{dialog.tags}}</span>
  </el-form-item>
  <br>
  <el-form-item label="[学科]:">
    <span>{{dialog.subjectName}}</span>
  </el-form-item>
  <el-form-item label="[目录]:">
    <span>{{dialog.directoryName}}</span>
  </el-form-item>
  <el-form-item label="[方向]:">
    <span>{{dialog.direction}}</span>
  </el-form-item>
  <hr>
  <el-form-item label="[题干]:">
    <p v-html="dialog.question"></p>
  </el-form-item>
  <el-form-item v-if="dialog.questionType!=='3'">
    <div>{{dialog.questionType|changeQuestionType}}题选项：（以下选中的选项为正确答案）</div>
     <template  v-if="dialog.questionType==='1'">
       单选
       <div v-for="(item,index) in dialog.options" :key='index'>
            <el-radio :value='item.isRight' :label="1" style="margin-right:10px">{{item.title}}</el-radio>
       </div>
     </template>

      <template v-if="dialog.questionType==='2'" >
          <div v-for="(item,index) in dialog.options" :key='index'>
            <el-checkbox :value='item.isRight===1?true:false' style="margin-right:10px"> {{item.title}}</el-checkbox>
          </div>
     </template>
  </el-form-item>
   <hr>
   <div class="btn1">
      <div >【参考答案】：<el-button type="primary" @click="clihidden">视频答案预览</el-button>
      <br>
 <!-- <video src="v-html='dialog.videoURL'" width="400px" :hidden='hidden'></video> -->
      <video  width="400px" v-show="videoShow" style="border:1px solid red" id="videoDom"></video>

      </div>
    <hr>
      <div>
        【答案解析】：<span v-html="dialog.answer"></span>
    </div>
    <hr>
     <div>
         【题目备注】：{{dialog.remarks}}
     </div>
   </div>
  </el-form>

  <span slot="footer" class="dialog-footer">
    <el-button @click="closeDialog">关闭</el-button>

  </span>
</el-dialog>
    </el-card>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '../../api/hmmm/questions'
// import types from '../../filters/index.js'
export default {
  data () {
    return {

      hidden: true,
      checked: false,
      questionIDs: '',
      // 页码数
      total: 200,
      // 当前页面展示个数
      pagesize: 20,
      keyword: { input: '' },
      // 页数展示个数
      pagesizes: [5, 10, 15, 20],
      //  当前页面
      currentPage: 1,
      //  题组数据
      tableData: [],
      nums: '',

      // 窗口开关
      dialogVisible: false,
      formInline: {

      },
      // 单选
      radioRight: 1,
      // 多选
      checkBoxRight: [],
      // 视频弹窗
      videoShow: false,

      // 窗口数据
      dialog: {
        questionType: 2,
        enterpriseID: 1,
        difficulty: '2',
        tags: '语言梗',
        subjectName: 'java',
        directoryName: 'java基础',
        direction: '网络',
        question: '前端语言有哪些?',
        videoURL: '../../../../../资料/b_Uc9dpeHc9DhE1592936202_10s.mp4',
        // videoURL: '../../../../../资料/7、箭头函数中的this.avi',
        options: [{ title: 'css' }, { title: 'js' }, { title: 'c++' }, { title: 'html' }],
        answerID: ' java是一门后台编程语法，而javascrip起初是浏览器脚本，后台nodejs出现了称为了后台编程语言。',
        remarks: '语言常识'

      }
    }
  },

  methods: {
    clihidden () {
      if (this.dialog.videoURL) {
        this.videoShow = !this.videoShow

        const url = 'https://hrsaas-1308447471.cos.ap-beijing.myqcloud.com/%E8%88%AA%E7%A9%BA%E6%9C%BA%E7%A5%A8%E8%B4%AD%E4%B9%B0%E5%B9%B3%E5%8F%B0.mp4'
        const video = document.querySelector('#videoDom')
        video.src = url
        if (this.videoShow) {
          video.play()
        } else {
          video.pause()
        }
      } else {
        this.$message.error('视频不存在!')
      }
    },
    clear () {
      this.keyword.input = ''
    },
    search () {
      this.getreqdata()
    },
    // 窗口数据
    async getdata (id) {
      this.dialogVisible = true
      const res = await detail({ id })
      this.dialog = res.data
      console.log(this.dialog)

      if (this.dialog.questionType === '2') {
        this.dialog.options.forEach(item => {
          if (item.isRight === 1) {
            this.checkBoxRight.push(item.code)
          }
        })
      }
    },
    // 关闭弹窗
    closeDialog () {
      this.videoShow = false
      const video = document.querySelector('#videoDom')
      video.pause()
      this.dialogVisible = false
    },
    // 字体列表删除
    deldata (id) {
      this.$confirm('确定要删除当前内容么', '提示')
        .then(async () => {
          await removeRandoms(id)

          this.$message.success('删除成功')
          this.getreqdata()
          // console.log(this.tableData)
        }).then((err) => { console.log(err) })
    },
    handleSizeChange (val) {
      this.pagesize = val
      this.getreqdata()
      // console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      this.currentPage = val
      // console.log(`当前页: ${val}`)
      this.getreqdata()
    },
    // 组题列表
    async  getreqdata () {
      const res = await randoms({ page: this.currentPage, pagesize: this.pagesize, keyword: this.keyword.input })
      this.tableData = res.data.items
      this.nums = res.data.counts
      // console.log(this.tableData)
    }

  },
  created () {
    this.getreqdata()
  }
}
</script>

<style lang='scss' scoped>
.header {
  display: flex;
  justify-content: space-between;
  span {
  font-weight: 700;
}
.inp {
  width: 250px;
  margin-left: 15px;
}
}
.bodyer {
  margin: 15px;
  i {
    margin-right: 15px;
    color: #909399;
  }
  .size1  {
    color: #909399;
  }
}
.btn {
  border-radius: 50%;
  width: 23px;
  height: 23px;
  background-color: pink;
  border: 1px solid red;
  i {
    margin-left: -2px;
  }
}
.demo-form-inline {

}
p {
  color: #5200ff;
}
.btn1 {
  padding-left: 10%;
}
</style>
